<template>
    <div id="instructionInfo-content">
        <el-row class="form-content">
            <el-form label-width="69px">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="产品代码(名称):">
                            <RiskEntryInput @set-entry-data="getFundCode" :returnDatas="searchForm.fundCode" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="证券代码(名称):">
                            <el-select
                                v-model="searchForm.stockCode"
                                @visible-change="handleStockVisibleChange"
                                remote
                                filterable
                                :remote-method="getStockCodeList"
                                :loading="selectLoading"
                                size="mini"
                                clearable
                                @clear="getStockCodeList('')"
                            >
                                <el-option
                                    v-for="i in stockCodeSelectData"
                                    :key="i.stockCode"
                                    :label="i.stockCode + ' ' + i.stockName"
                                    :value="i.stockCode"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="委托方向:">
                            <el-select v-model="searchForm.orderDirection" clearable size="mini">
                                <el-option v-for="i in orderDirectionData" :key="i.dictKey" :label="i.dictKeyName" :value="i.dictKey"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="证券类别:">
                            <el-select v-model="searchForm.stockType" filterable clearable size="mini">
                                <el-option v-for="(value, key) in stockTypePojo" :key="key" :value="key" :label="value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="业务类型:">
                            <el-select v-model="searchForm.businessType" clearable size="mini">
                                <el-option value="6" label="ETF一级市场业务"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="3">
                        <el-button type="primary" size="mini" @click="handleButtonClick('search')">查询</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="指令序号:">
                            <el-input size="mini" placeholder="" v-model="searchForm.instNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="指令状态:">
                            <el-select v-model="searchForm.instStatus" size="mini">
                                <el-option v-for="(value, key) in instructionStatus" :key="key" :value="key" :label="value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="下达人:">
                            <el-select v-model="searchForm.directUser" filterable clearable size="mini">
                                <el-option
                                    v-for="item in orderUsers"
                                    :key="item.dictKey + item.dictCode"
                                    :value="item.dictCode"
                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="下达日期:">
                            <el-date-picker
                                v-model="directDate"
                                type="date"
                                placeholder="请选择"
                                value-format="yyyyMMdd"
                                format="yyyy/MM/dd"
                                style="width: 100%"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-button type="primary" size="mini" @click="handleButtonClick('layout')">布局设置</el-button>
                        <el-button size="mini" @click="handleButtonClick('hide')" v-show="SHOW_SECURITY">{{
                            hideVisible ? '展开' : '隐藏'
                        }}</el-button>
                    </el-col>
                </el-row>
                <el-row v-if="!hideVisible">
                    <el-col :span="5">
                        <el-form-item label="资产单元编号(名称):">
                            <el-select v-model="searchForm.assetCode" filterable clearable size="mini">
                                <el-option
                                    v-for="i in assetCodeSelectData"
                                    :key="i.assetCode"
                                    :label="i.assetCode + ' ' + i.assetName"
                                    :value="i.assetCode"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="组合编码(名称):">
                            <el-select v-model="searchForm.fundAcCode" filterable clearable size="mini">
                                <el-option
                                    v-for="i in fundAccountCodeSelectData"
                                    :key="i.fundAccountCode"
                                    :label="i.fundAccountCode + ' ' + i.fundAccountName"
                                    :value="i.fundAccountCode"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="15"></el-col>
                </el-row>
            </el-form>
        </el-row>
        <el-row class="table-content">
            <div style="height: calc(100% - 60px)">
                <vxe-table
                    :key="tableKey"
                    :header-cell-style="{ backgroundColor: '#e8f3ff', padding: '4px 0' }"
                    :footer-cell-style="{ backgroundColor: '#e8f3ff', padding: '4px 0' }"
                    :data="dataSource"
                    border
                    v-loading="tableLoading"
                    element-loading-text="加载中"
                    size="mini"
                    height="100%"
                    ref="table"
                    @cell-click="handleRowClick"
                    style="cursor: pointer"
                    highlight-current-row
                    highlight-hover-row
                    stripe
                    auto-resize
                    resizable
                    :sort-config="{
                        defaultSort: { field: sortProp, order: sortOrder, orders: ['desc', 'asc', null] },
                        remote: true,
                    }"
                    @sort-change="changeTableSort"
                    show-header-overflow
                >
                    <template v-for="(item, index) in showFieldList">
                        <vxe-column
                            show-overflow
                            :key="index + 'name'"
                            :title="item.content"
                            :field="item.id"
                            :min-width="item.minWidth"
                            :fixed="item.fixed"
                            :sortable="['operate'].includes(item.id) ? false : true"
                        >
                            <template slot-scope="scope">
                                <span v-if="item.id == 'operate'">
                                    <el-button type="text" @click.stop="handleBtnDel(scope.row)" :disabled="handleDisabled(scope.row)"
                                        >撤单</el-button
                                    >
                                </span>
                                <span v-else-if="item.needFormat">
                                    {{ item.formatter(scope.row[item.id], scope.row) }}
                                </span>
                                <span v-else>{{ scope.row[item.id] || '--' }}</span>
                            </template>
                        </vxe-column>
                    </template>
                </vxe-table>
            </div>
            <risk-pagination :paging="pages" @page-change="handlePagesChange"></risk-pagination>
        </el-row>
        <el-row class="tab-content">
            <el-tabs v-model="activeKey" style="height: 100%">
                <el-tab-pane label="指令明细" name="detail" class="inst-detail">
                    <div class="detail-container">
                        <InstructionDetail :key="detailKey" :detailFields="detailFields" :instructionInfo="currentClickRow" :noData="noData" />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="指令证券" name="stock">
                    <div style="height: 100%; padding: 4px 10px">
                        <risk-table :msg="instStockMsg" v-loading="tabsLoading"></risk-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="指令结果" name="result">
                    <div style="height: 100%; padding: 4px 10px">
                        <risk-table
                            :msg="instResultMsg"
                            v-loading="tabsLoading"
                            @handleBtn="handleBtnLook"
                            :key="instResultMsgNumKey + 'instResultMsgNumKey'"
                            v-if="activeKey === 'result'"
                        ></risk-table></div
                ></el-tab-pane>
            </el-tabs>
        </el-row>
        <RiskTableLayout
            title="页面布局"
            :visible.sync="layoutDialog"
            :field-list="tableColumns"
            :selected-field-list="selectedFieldList"
            :fixed-field-list="fixedFieldList"
            table-name="ETF_INST_INFO"
            @on-submit="onSubmit"
        />
    </div>
</template>
<script lang="ts">
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import StatusTag from '@/pages/risk-measure/components/status-tag.vue';
import RiskTableLayout from '@/common/components/risk-table-layout.vue';
import RiskTable from '@/common/components/risk-table.vue';
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import InstructionDetail from '../components/instruction-detail.vue';
import InstructionInfoClass from '../class/instruction-info-class';
import RiskPagination from '@/common/components/risk-pagination.vue';
import ETFColumnUtil from '../utils/etf-column-util';
import { getUser } from '@/utils/user-util';
import { getEtfList } from '../api/etf';
import ColumnUtil from '../utils/column-util';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'ETFInstructionInfo',
    components: {
        RiskTableLayout,
        RiskTable,
        StatusTag,
        RiskEntryInput,
        InstructionDetail,
        RiskPagination,
    },
})
export default class ETFInstructionInfo extends InstructionInfoClass {
    @Prop()
    renderCount: number;

    ETFColumnUtil = new ETFColumnUtil();

    // 查询表单
    searchForm: any = {
        businessType: '6',
        directUser: '',
        fundCode: '',
        instNo: '',
        instStatus: '1',
        orderDirection: '',
        stockCode: '',
        stockType: '',
        assetCode: '',
        fundAcCode: '',
        sort: 'D_DIRECT_DATE' + ' ' + 'DESC' + ',' + 'D_DIRECT_TIME' + ' ' + 'DESC',
        userCode: getUser().userCode,
    };
    // 全部表格列
    tableColumns: any[] = this.ETFColumnUtil.ETFOrderInfoColumns;
    fixedFieldList: any[] = [
        { content: '指令序号', id: 'instNo', fixed: 'left', minWidth: 120 },
        { content: '产品代码', id: 'fundCode', fixed: 'left', minWidth: 120 },
        { content: '指令状态', id: 'instStatus', fixed: 'right', minWidth: 120 },
        { content: '操作', id: 'operate', fixed: 'right', minWidth: 80 },
    ];
    // 指令明细字段
    detailFields: any[] = [];
    activeKey: string = 'detail'; //  指令当前tabKey
    instructionInfoUrl: string = '/instruction/etfInstruction'; // 指令信息请求路径
    // 委托方向数据
    orderDirectionData: any[] = [
        { dictKey: 'P', dictKeyName: '基金申购' },
        { dictKey: 'Q', dictKeyName: '基金赎回' },
    ];
    // 证券类别列表
    stockTypePojo: any = {
        F: '开放式基金',
    };

    @Watch('renderCount')
    onWatchRenderCount() {
        this.getInstruction(this.searchForm, this.pages);
    }

    async mounted() {
        this.extraFields = this.ETFColumnUtil.etfSortFields;
        if (this.SHOW_SECURITY) {
            this.queryAssetCodeList();
            this.queryFundAccountCode();
        }
        // 获取指令明细字段
        let detailFields = this.ETFColumnUtil.getETFOrderDetailColumns();
        this.detailFields = [detailFields];
        this.tableColumns = this.ColumnUtil.handleTableColumns(this.tableColumns, 'id');
        // 获取下达人下拉列表
        this.queryOrderUserList();
        // 获取证券下拉
        this.getStockCodeList('');
        this.marketCodes = DictionConstUtil.ListToPojo(await DictionConstUtil.FNMarketType());
        this.tableName = 'ETF_INST_INFO';
        this.queryLayout();
    }

    // 产品代码组件回调事件
    getFundCode(val: any) {
        this.searchForm.fundCode = val;
    }

    /**
     * 查询证券代码下拉数据
     * @param value 搜索值
     * @param stockCodeUrl 证券代码请求路径
     */
    getStockCodeList(value: string) {
        this.selectLoading = true;
        getEtfList(value)
            .then(res => {
                this.stockCodeSelectData = res;
                this.selectLoading = false;
            })
            .catch(() => {
                this.selectLoading = false;
            });
    }

    handleStockVisibleChange(val) {
        if (!this.searchForm.stockCode && val && !this.stockCodeSelectData.length) {
            this.getStockCodeList('');
        }
    }

    changeTableSort(column: any) {
        super.changeTableSort(column);
    }

    // 分页
    handlePagesChange(): void {
        this.getInstruction(this.searchForm, this.pages);
    }

    // 指令信息表表格行单击事件
    handleRowClick({ row }): void {
        this.currentClickRow = row;
        this.currentClickRow.stockTypeName = this.currentClickRow.stockType;
        this.handleRow(row);
    }

    // 指令结果表格查看按钮点击
    handleBtnLook(obj: any): void {
        super.handleBtnLook(obj);
    }

    /**
     * 布局提交回调事件
     * @param data
     */
    onSubmit(data) {
        this.queryLayout();
    }
}
</script>
<style lang="scss" scoped>
@import '@/pages/risk-time/styles/inst-info';
</style>
